<!-- 点检设置 -->
<template>
  <div class="app-container">
    <div class="cardBox">
      <leftTree ref="leftTree" :data="treeData" node-key="id" :default-props="defaultProps" search-key="typeName" width="200px" :default-expand-keys="defaultExpandKeys" :defalut-expand-all="true" @handleNodeClickAll="handleNodeClick" />
      <el-col id="right-content" class="right-content" :offset="0" :span="18">
        <div class="box-title">
          <el-breadcrumb separator="/" style="line-height:50px;">
            <el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index">{{ item }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="search-and-button">
          <el-input v-model="search.keyword" placeholder="请输入关键字进行搜索" clearable @keyup.enter.native="getTableInfo()" @clear="getTableInfo()">
            <el-button slot="append" icon="el-icon-search" @click="getTableInfo()" />
          </el-input>
          <div class="btnList">
            <el-button type="primary" icon="el-icon-sunrise-1" @click="$refs['routine'].showDialog()">预警设置</el-button>
            <el-button type icon="el-icon-refresh-left" @click="$router.push('/reload')">刷新</el-button>
            <el-button type icon="el-icon-more">更多</el-button>
          </div>
        </div>
        <el-row class="table">
          <el-table ref="tableData" v-loading="loading" :cell-style="cellStyle" :data="tableData" stripe border @selection-change="handlerSelection">
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column align="center" type="index" label="索引" width="60px" />
            <el-table-column v-for="item in fieldList" :key="item.id" :align="item.align || 'left'" :prop="item.code.split(':')[1]" :label="item.val" :min-width="item.width + 'px'" show-overflow-tooltip />
            <el-table-column label="操作" fixed="right" align="center" width="100px">
              <template #default="{ row }">
                <el-button-group>
                  <el-button type="text" @click="checkBtn(row)">
                    <i class="iconfont icon-search"></i>
                  </el-button>
                  <!-- <el-button type="danger" icon="el-icon-delete" @click="deleteRow(row)" /> -->
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row>
          <div class="table-btn-box">
            <el-button @click="
                () => {
                  tableData.forEach(row => {
                    $refs['tableData'].toggleRowSelection(row, true)
                  })
                }
              ">选择全部</el-button>
            <el-button @click="
                () => {
                  tableData.forEach(row => {
                    $refs['tableData'].toggleRowSelection(row)
                  })
                }
              ">反向选择</el-button>
            <el-button>
              更多菜单
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
          </div>
          <pagination ref="Pagination" :total="total" :current.sync="search.current" :size.sync="search.size" @pagination="getTableInfo" />
        </el-row>
      </el-col>
    </div>
    <!-- 点检预警设置 -->
    <routine ref="routine" @getTableInfo="getTableInfo" @getLevelTime="getLevelTime" />
    <!-- 点检 -->
    <spot-check-box ref="spotCheckBox" :user-info="userAllList" @getTableInfo="getTableInfo" />
  </div>
</template>
<script>
import { getUserListApi } from '@/api/public'
import ImportFile from '@/components/ImportFile'
import routine from './components/routineCheckAlertSettings'
import spotCheckBox from './components/spotCheckBox'
import Pagination from '@/components/Pagination'
import leftTree from '@/components/LeftTree'
export default {
  components: {
    routine,
    spotCheckBox,
    Pagination,
    ImportFile,
    leftTree
  },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'typeName'
      },
      defaultExpandKeys: ['-1'],
      breadcrumb: ['设备类型目录'],
      search: {
        current: 1,
        size: 20,
        keyword: '',
        treeStr: '-1'
      },
      tableData: [],
      total: 0,
      selectList: [],
      loading: false,
      userAllList: [],
      ruleForm: {}
    }
  },
  computed: {},
  async mounted() {
    await this.getTableInfo()
    await this.getUserAll()
    await this.getAllClassify()
  },
  created() {
    this.getLevelTime()
  },
  methods: {
    /**
     * @description: 查询所有部门树结构
     * @return {*}
     */
    async getAllClassify() {
      const res = await this.$axios.get('/equip/info/allClassify')
      if (res?.data.code === 200) {
        this.treeData = [
          {
            id: '-1',
            typeName: '设备类型目录',
            children: this.arrConvert(res.data.data)
          }
        ]
      }
    },
    arrConvert(arr) {
      let arr2 = []
      for (let key in arr) {
        let obj = {
          typeName: arr[key],
          id: arr[key]
        }
        arr2.push(obj)
      }
      return arr2
    },
    /* 获取所有人员 */
    async getUserAll() {
      const res = await getUserListApi()
      if (res?.data.code === 200) {
        this.userAllList = res.data.data
      }
    },
    /* 获取预警设置 */
    async getLevelTime() {
      const res = await this.$axios.get('/equip/point/check/getWarning')
      if (res && res.data.code === 200) {
        this.ruleForm = res.data.data
      }
    },
    /**
     * @description: 树节点点击
     * @param {*} data
     * @param {*} node
     * @return {*}
     */
    handleNodeClick({ data, node }) {
      this.breadcrumb = []
      this.returnNodeLabel(node.parent)
      this.breadcrumb.push(data.typeName)
      this.search.treeStr =
        data.typeName === '设备类型目录' ? '-1' : data.typeName
      this.getTableInfo()
    },
    /**
     * @description: 递归获取名称
     * @param {*} node
     * @return {*}
     */
    returnNodeLabel(node) {
      if (node.parent) {
        this.breadcrumb.unshift(node.data.typeName)
        this.returnNodeLabel(node.parent)
      }
    },
    handlerSelection(val) {
      this.selectList = val
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.label === '计划点检时间') {
        const { nextPointCheckTime, remainingDays } = row
        if (nextPointCheckTime) {
          return this.handleTime(Number(remainingDays))
        }
      }
    },
    /* 根据时间设置样式 */
    handleTime(time) {
      const { lv1, lv2, lv3 } = this.ruleForm
      const colorStr = (backgroundColor, color = '#000') => {
        return `background:${backgroundColor};color:${color};border-radius:3px;`
      }
      let str = ''
      lv3 && time < lv3 ? (str = colorStr('yellow')) : ''
      lv2 && time < lv2 ? (str = colorStr('orange')) : ''
      lv1 && time < lv1 ? (str = colorStr('red', '#fff')) : ''
      console.log(str)
      return str
    },
    /* 点检 */
    async checkBtn(row) {
      this.$refs['spotCheckBox'].showDialog(Object.assign({}, row))
    },
    async getTableInfo(page = 1) {
      this.search.current = page
      this.loading = true
      const res = await this.$axios.post('/equip/point/check/list', this.search)
      if (res?.data.code === 200) {
        this.tableData = res.data.data.list
        this.total = res.data.data.total
        setTimeout(() => {
          this.loading = false
        }, 100)
      } else {
        this.loading = false
      }
    },
    handlerSelection(val) {
      this.selectList = val
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
